Skip to content

feat: visual revamp of marketing site (homepage, analyzer, wallet)#683

Merged
jamespepper81 merged 4 commits into
devfrom
claude/bitsleuth-website-redesign-nkpkk8
Jul 7, 2026
Merged

feat: visual revamp of marketing site (homepage, analyzer, wallet)#683
jamespepper81 merged 4 commits into
devfrom
claude/bitsleuth-website-redesign-nkpkk8

Conversation

@jamespepper81

@jamespepper81 jamespepper81 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Description

A visual revamp of the BitSleuth marketing site aimed at a stronger "wow factor" while keeping a trustworthy, professional feel appropriate for financial/crypto products. Alongside the redesign, this fixes several latent dark-mode, contrast, and CSP bugs uncovered during the audit.

Design foundation

  • Display font: self-host Space Grotesk (variable) as --font-display, applied to all headings for a distinct voice alongside the existing Inter body font.
  • Button component (src/components/ui/button.tsx): richer default/outline/ghost variants (shadow, hover glow, active press), a new xl size for hero CTAs, and a premium shine variant with a sweeping sheen used on top-of-funnel CTAs. Redundant per-callsite class strings removed.
  • New utilities/keyframes (globals.css, tailwind.config.ts): dot/grid background patterns, .card-glow-border hover glow, ambient hero orbs, nav underline-slide, and shine/float/pulse-glow/gradient-x animations — all prefers-reduced-motion aware.
  • Reveal component (src/components/ui/reveal.tsx): IntersectionObserver-driven scroll entrance animation with stagger delays; renders visible immediately when unsupported or under reduced motion.

Homepage: animated hero gradient + dot backdrop, glow-border product cards, a new trust strip (non-custodial / no registration / free during beta / open educational content), a closing gradient CTA banner, and an expanded 4-column footer.

Analyzer page: shine CTA + glow input in the hero, numbered How-It-Works steps with a connector line, a featured Free pricing plan, un-blurred "coming soon" cards with proper badges, and lucide check icons replacing ✅ emoji.

Wallet page: the hero text wall restructured into a lead line + checkmark bullets, with reveal animations and token cleanup across sections.

Bug fixes

  • Testimonials rendered blinding white cards / low-contrast text in dark mode (hardcoded bg-white, text-gray-*, light-only avatar colors) — now fully theme-aware.
  • Homepage product-card CTA used dark text on an orange background (text-foreground → text-primary-foreground).
  • Educational section hardcoded orange-* utilities instead of brand tokens.
  • CSP: the static style-src policy silently blocked every server-rendered inline style attribute (safe-area insets, next/image sizing, animation stagger delays) and Next.js-injected style tags. Extended the existing script-src 'unsafe-inline' trade-off to style-src; the site renders no user-supplied HTML.

Type of change

  • Bug fix
  • New feature
  • Documentation update
  • Refactoring / code cleanup
  • Performance improvement
  • Other (describe below)

Related issues

N/A

Testing

  • npm run ci passes (lint, typecheck, 29 tests, production build).
  • Ran the production build in a real Chromium (Playwright) and captured full-page screenshots of /, /analyzer, and /wallet in both light and dark, at 1440px desktop and 390px mobile widths — verified contrast, layout, header/footer, and that scroll-reveal animations settle correctly.
  • Verified the CSP fix in-browser: server-rendered inline styles (including animation stagger delays) now apply, with no CSP violations in the console. No console errors beyond pre-existing Vercel analytics 404s that only occur in the local environment.

Screenshots (if applicable)

Screenshots (homepage light/dark, analyzer dark, wallet light, mobile dark) were shared during the working session. They can't be attached from the CLI here — see the verification method above for how each surface was checked.

Checklist

  • npm run typecheck passes
  • npm run lint passes
  • npm run test passes
  • npm run build succeeds
  • Responsive design tested (mobile, tablet, desktop)
  • Dark and light mode tested
  • No console.log statements left in production code
  • SEO metadata added for any new pages — N/A (no new pages/routes)
  • Documentation updated if needed — N/A

🤖 Generated with Claude Code

https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys

Generated by Claude Code

claude added 3 commits July 6, 2026 01:36
@claude
feat: add display font, richer button variants, and scroll-reveal fou…
30a984a 
…ndation

- Self-host Space Grotesk variable font as the display face for headings
- Upgrade Button variants (shadow/active states, xl size, premium shine CTA)
- Add dot/grid background patterns, glow-border cards, nav underline,
  hero orbs, and float/pulse/gradient keyframes (reduced-motion aware)
- Add Reveal component: IntersectionObserver-driven scroll entrance
  animation with stagger delays

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys
@claude
feat: revamp homepage, analyzer, and wallet landing visuals
dcb629d 
- Homepage: animated hero gradient, dot-pattern backdrop, glow-border
  product cards, trust strip, closing CTA banner, 4-column footer
- Testimonials: fix hardcoded light-only colors that broke dark mode;
  drop auto-rotate in favor of scroll-reveal stagger
- Educational: replace hardcoded orange-* utilities with brand tokens
- Analyzer: shine CTA + glow input in hero, numbered how-it-works steps
  with connector line, featured Free pricing plan, un-blur coming-soon
  cards, lucide check icons
- Wallet: restructure hero text wall into checkmark bullets, apply
  reveal animations and token cleanup across sections
- Fix primary-button foreground contrast on hero product cards

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys
@claude
fix: allow inline styles in CSP so server-rendered style attributes a…
6b02361 
…pply

The static CSP blocked every server-rendered style attribute (safe-area
insets, next/image sizing, animation stagger delays) and Next-injected
style tags. Extend the existing script-src trade-off to style-src; the
site renders no user-supplied HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys
@jamespepper81

jamespepper81 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor Author

@claude can you code review the pr 683 and make any changes required

@claude
refactor: drop unused shine animation and permanent will-change
e7c6c4f 
Code-review cleanup on the revamp:
- Remove will-change-transform from the Reveal wrapper; it was applied to
  every reveal on the landing pages and never cleared, pinning a
  compositing layer per element. The transition runs fine without it.
- Remove the unused Tailwind `shine` keyframe/animation (the button sheen
  uses .btn-shine-overlay + the shine-sweep keyframe in globals.css) and
  the now-orphaned .animate-shine entry in the reduced-motion block.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LgXVLAviZY9EQ5jFeFD5ys
@jamespepper81 Claude

jamespepper81 commented Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Ran a code review over the full diff (32 files). No correctness bugs — the section changes are token/utility swaps, Reveal wrappers, and button-variant adoption; the style-src 'unsafe-inline' CSP change is correct and necessary (the static policy was silently blocking every server-rendered inline style attribute). Lint, typecheck, tests, and build all pass.

Applied two small quality fixes in e7c6c4f:

  • Reveal — removed the permanent will-change-transform. It was set on every reveal wrapper across the landing pages and never cleared, which pins a compositing layer per element (needless memory/perf cost, especially on mobile). The 700ms transition runs fine without it.
  • Dead code — removed the unused Tailwind shine keyframe/animation (the button sheen is done via .btn-shine-overlay + the shine-sweep keyframe in globals.css) and the orphaned .animate-shine entry in the reduced-motion block.

One thing left as-is by design: Reveal keeps content at opacity-0 until IntersectionObserver fires, so reveal-wrapped sections depend on client JS. That's acceptable for a Next.js app (JS is the norm, and above-the-fold wrappers reveal immediately since IO reports initial intersection), so I didn't add a <noscript> fallback — flagging it in case you'd prefer one.

Nothing else needs changing. CI is re-running on the new commit.

Generated by Claude Code

@jamespepper81 jamespepper81 merged commit 1e00603 into dev Jul 7, 2026
4 checks passed
@jamespepper81 jamespepper81 deleted the claude/bitsleuth-website-redesign-nkpkk8 branch July 7, 2026 07:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jamespepper81 @claude